import React from "react"
import { useObserver } from 'mobx-react-lite'
import store from "../context/useStore"
import "./Detail.scss"
import { useHistory } from "react-router-dom"
const Detail: React.FC = () => {
    let history = useHistory()
    function goRankDetail(e: React.MouseEvent) {
        if (e.target !== e.currentTarget) {
            let ele = e.target as HTMLElement;
            if (ele.tagName !== 'LI') {
                ele = ele.parentElement.parentElement;
            }
            let id = ele.dataset.id;
            history.push('/rankDetail?id=' + id);
        }
    }

    // 跳转排名详情
    function goArticleDetail(e: React.MouseEvent) {
        if (e.target !== e.currentTarget) {
            let ele = e.target as HTMLElement;
            while (ele.tagName !== 'LI') {
                ele = ele.parentElement;
            }
            let id = ele.dataset.id;
            history.push('/articleDetail?id=' + id);
        }
    }



    let { search } = store()
    return useObserver(() => <div className="Detail">
        <section className="sea" onClick={goRankDetail}>
            {
                search.searchRankList.map(item => {
                    return <li key={item.id} data-id={item.id}>
                        <h2><img src={item.image} alt="" /></h2>
                        <span>{item.name}</span>
                    </li>
                })
            }
        </section>
        <div>
            <span>
                内容
            </span>
        </div>
        <section onClick={goArticleDetail} className="li">
            {
                search.searchArticleList.map(item => {
                    return <li key={item.id} data-id={item.id}>
                        <h2><img src={item.image} alt="" /></h2>
                        <p>{item.title}</p>
                        <div>
                            <div>
                                <h3><img src={item.avatar} alt="" /></h3>
                                <span>{item.nickname}</span>
                            </div>
                            <span>推荐值：{item.score}</span>
                        </div>
                    </li>
                })
            }
        </section>
    </div>)
}

export default Detail